<template>
	<ele-modal :width="750" :visible="visible" :confirm-loading="loading" :title="'新建'"
		:body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
			:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="23" :sm="23" :xs="23">
					<a-form-item label="点数方式" v-bind="validateInfos.type">
						<a-select mode="multiple" :showArrow="true" placeholder="请选择" v-model:value="type"
							@change="optionsChange">
							<a-select-option :value="item.value" v-for="(item, index) in options" :disabled="
                  type.length > 2 &&
                  type.findIndex((o) => o === item.value) === -1
                ">
								{{ item.label }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="点数门店" v-bind="validateInfos.type_code">
						<a-select optionFilterProp="label" :options="options1" allow-clear
							v-model:value="form.type_code" placeholder="请选择" @change="optionsChange1"
							autocomplete="off" />
					</a-form-item>
					<a-form-item label="点数位置" v-bind="validateInfos.store_group_code">
						<a-radio-group v-model:value="radioValue" @change="radioGroup">
							<a-radio value="1">全部位置</a-radio>
							<a-radio value="2">指定位置</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label=" " :colon="false" v-if="radioValue == 2">
						<a-select optionFilterProp="label" :options="options2" allow-clear mode="multiple"
							:showArrow="true" v-model:value="store_group_code" placeholder="请选择"
							@change="optionsChange2" autocomplete="off" />
					</a-form-item>
					<a-form-item label="负责人" v-bind="validateInfos.charge_user_id">
						<a-select optionFilterProp="label" :options="options3" allow-clear
							v-model:value="form.charge_user_id" placeholder="请选择" @change="optionsChange3"
							autocomplete="off" />
					</a-form-item>
					<a-form-item label="备注"><a-textarea allow-clear placeholder="请输入" v-model:value="form.note"
							autocomplete="off" /></a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		Form,
		message
	} from 'ant-design-vue';
	import {
		emailReg,
		phoneReg,
		identityReg
	} from 'ele-admin-pro';
	import {
		store_check_add
	} from '@/api/warehouse/store_check';
	import {
		get_store_select,
		get_store_group_select,
		get_store_user_select
	} from '@/api/material/select';

	// 表格列配置
	const useForm = Form.useForm;

	const props = defineProps({
		// 弹窗是否打开
		visible: Boolean
	});

	const emit = defineEmits(['done', 'update:visible']);

	// 提交状态
	const loading = ref(false);
	const radioValue = ref('1');
	const type = ref([]);
	const store_code = ref(null);
	const store_group_code = ref([]);
	const options = ref([{
			label: '品类',
			value: '1'
		},
		{
			label: '类别',
			value: '2'
		},
		{
			label: '大类',
			value: '4'
		},
		{
			label: '小类',
			value: '8'
		}
	]);
	const options1 = ref([]);
	const options2 = ref([]);
	const options3 = ref([]);
	const form = reactive({
		type: null,
		type_code: null,
		store_group_code: null,
		charge_user_id: null,
		note: ''
	});

	onMounted(() => {
		get_store_select({
				page: 1,
				page_size: 9999
			})
			.then((res) => {
				options1.value = res;
				if (res.length > 0) {
					store_code.value = res[0].value;
					getUser();
				}
			})
			.catch((e) => {
				message.error(e);
			});
	});

	const radioGroup = (e) => {
		radioValue.value = e.target.value;
		if (radioValue.value == 1) {
			form.store_group_code = '';
		} else {
			options2.value = [];
			form.store_group_code = '';
			if(form.type_code){
				getWarehouse();
			}
		}
	};
	const getUser = () => {
		get_store_user_select({
				page: 1,
				page_size: 9999,
				filters: {
					store_code: store_code.value
				}
			})
			.then((res) => {
				options3.value = res;
			})
			.catch((e) => {
				message.error(e);
			});
	};
	const getWarehouse = () => {
		get_store_group_select({
				page: 1,
				page_size: 9999,
				filters: {
					store_code: store_code.value
				}
			})
			.then((res) => {
				options2.value = res;
			})
			.catch((e) => {
				message.error(e);
			});
	};
	const optionsChange = (e) => {
		type.value = e;
		let num = 0;
		e.forEach((item) => {
			num += Number(item);
		});
		form.type = num;
	};
	const optionsChange1 = (e) => {
		store_code.value = e;
		getUser();
		form.charge_user_id = null;
		if (radioValue.value == 2) {
			options2.value = [];
			store_group_code.value = [];
			form.store_group_code = '';
			getWarehouse();
		}
	};
	const optionsChange2 = (e) => {
		store_group_code.value = e;
		form.store_group_code = e.toString();
	};
	const optionsChange3 = (e) => {
		form.charge_user_id = e;
	};
	// 表单验证规则
	const rules = reactive({
		type: [
		{
			required: true,
			message: '请选择点数方式',
			type: 'string',
			trigger: 'blur'
		}
	],
	type_code: [
		{
			required: true,
			message: '请选择点数位置',
			type: 'string',
			trigger: 'blur'
		}
	],
    charge_user_id: [
      {
        required: true,
        message: '请选择负责人',
        type: 'string',
        trigger: 'blur'
      }
    ]
	});

	const {
		validate,
		validateInfos
	} = useForm(form, rules);
	/* 保存 */
	const save = () => {
		if(!form.type_code){
			return message.error('请选择点数门店');
		}
		store_check_add(form)
			.then((res) => {
				message.success(res.msg);
				emit('done', res.data.id);
			})
			.catch((e) => {
				message.error(e);
			});
		/* validate()
			.then(() => {
				console.log('form==', form);
				store_check_add(form)
					.then((res) => {
						message.success(res.msg);
						emit('done', res.data.id);
					})
					.catch((e) => {
						message.error(e);
					});
			})
			.catch(() => {}); */
	};
	/* 更新visible */
	const updateVisible = (value) => {
		emit('update:visible', value);
	};
</script>
<style scoped></style>